import React, {FC, useCallback, useContext, useMemo} from 'react';
import "./index.less";
import {FormattedMessage, Link, NavLink, Outlet} from "umi";
import {Avatar, Form, Input, Tooltip} from "antd";
import {CloseSquareFilled, UserOutlined} from "@ant-design/icons";
import {useModel} from "@@/exports";
import UserProfileAnalysis from "@/pages/MinePage/UserProfileAnalysis";
import GuessLike from "@/pages/MinePage/GuessLike";
import dayjs from "dayjs";
import {default as dayjsDurationPlugin} from 'dayjs/plugin/duration';
import {nanoid} from "nanoid";
import {HxConfigContext} from "@/layouts/HxConfigContext";

dayjs.extend(dayjsDurationPlugin)

interface MinePageProps {
}

const MinePage: FC<MinePageProps> = (props) => {
  const {initialState, setInitialState} = useModel('@@initialState');
  const userInfo = initialState?.currentUserInfo;
  const {isZhCN} = useContext(HxConfigContext)

  //注册时长(天)
  const userRegistrationDurationStr = useMemo(() => {
    // 7 years, 7 months, and 25 days.
    const yearUnit= isZhCN ? '年' : ' years, ';
    const monthUnit= isZhCN ? '个月' : ' months, ';
    const dayUnit= isZhCN ? '天' : ' days';
    if (!userInfo?.createTime) {
      return `0${dayUnit}`;
    }
    const registrationDate = dayjs(userInfo.createTime, 'YYYY-MM-DD HH:mm:ss');
    const currentDate = dayjs();
    const totalMilliseconds = currentDate.diff(registrationDate); // 获取毫秒差值

    const dur = dayjs.duration(totalMilliseconds);

    const years = Math.floor(dur.asYears());
    const months = Math.floor(dur.asMonths() % 12);
    const days = Math.floor(dur.asDays() % 30);

    let result = '';
    if (years > 0) result += `${years}${yearUnit}`;
    if (months > 0) result += `${months}${monthUnit}`;
    if (days > 0 || !result) result += `${days}${dayUnit}`;
    return result;
  }, [userInfo]);
  // 菜单选中样式
  const navActive = useCallback((props: {
    isActive: boolean;
  }) => {
    return props.isActive ? 'active' : undefined;
  }, []);

  return (
    <div className={"mine-page-container"}>
      <div className={"mine-page-header"}>
        <div className={"mine-page-left"}>
          <div className={"people-info"}>
            <div className={"people-avatar"}>
              <Avatar className={'hxiw-loginuser-an-avatar'} icon={<UserOutlined/>} size={54} src={userInfo?.avatar} draggable={false}/>
            </div>
            <div className={"people-content"}>
              <div className={"people-name"}>{userInfo?.nickname}</div>
              <div className={"people-tip"}> <FormattedMessage id="mine.CurrentAccountDesc" values={{desc: userRegistrationDurationStr}} /></div>
            </div>
          </div>
        </div>
        <div className={"mine-page-right"}>
          <NavLink to={"/mine/favorite"} className={({isActive}) => `mine-nav mine-nav-favorite ${isActive ? "active" : ""}`}>
            <FormattedMessage id="mine.Favorite" />
          </NavLink>
          <NavLink to={"/mine/subscription"} className={({isActive}) => `mine-nav mine-nav-subscription ${isActive ? "active" : ""}`}>
            <FormattedMessage id="mine.Subscription" />
          </NavLink>
          <NavLink to={"/mine/footprint"} className={({isActive}) => `mine-nav mine-nav-footprint ${isActive ? "active" : ""}`}>
            <FormattedMessage id="mine.Footprint" />
          </NavLink>
          <NavLink to={"/mine/sysmsg"} className={({isActive}) => `mine-nav mine-nav-sysmsg ${isActive ? "active" : ""}`}>
            <FormattedMessage id="mine.SystemMessage" />
          </NavLink>
          <NavLink to={"/mine/passport"} className={({isActive}) => `mine-nav mine-nav-passport ${isActive ? "active" : ""}`}>
            <FormattedMessage id="mine.AccountSecurity" />
          </NavLink>
        </div>
      </div>
      <div className={"mine-page-content"}>
        <div className={"mine-page-content-left"}>
          <Outlet/>
        </div>
        <div className={"mine-page-content-right"}>
          <div className={"mine-analysis-wrapper"}>
            <UserProfileAnalysis/>
            <GuessLike/>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MinePage;
